<html>
	<head>
		<style>
		#box{
		    width:390px;
		    height:390px;
		    border:1px solid black;
		    margin:10px auto;
		    overflow:hidden;
		}
		img{
		    float:left;
		    margin:0 10px 10px 0;
		}
		.img4{
			margin-right: 0; 
		}
		</style>
	</head>
	<body>
		<p>浮动元素之后的元素将围绕它，浮动元素之前的元素不会受到影响。</p>
		<div id="box">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="" class="img4">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="" class="img4">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="" class="img4">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="">
		    <img src="images/1.jpg" width="90px" height="90px" alt="" class="img4">
		</div>
		<p>浮动元素之后的元素将围绕它，浮动元素之前的元素不会受到影响。</p>
	</body>
</html>